<template>
  <basic-dialog :visible="show"
                :title="state === 'add'?'添加组织':state === 'child'?'添加子项':'编辑组织'"
                :isShowInnerLoading="isShowInnerLoading"
                min-width="400px"
  >
    <q-form @submit="submit" class="dialog-content">
      <div style="padding: 20px 20px 0">
        <div class="flex items-center font-16 padding-b-20">
          <div style="width: 88px;padding-right: 6px" class="text-right">上级名称: </div>
          <div class="text-ellipsis" style="max-width: calc(100% - 88px)">{{parentName}}</div>
        </div>
        <div class="flex items-center font-16 padding-b-20">
          <div style="width: 88px;padding-right: 6px" class="text-right">组织层级: </div>
          <div class="text-ellipsis" style="max-width: calc(100% - 88px)">{{orgClass.label}}</div>
        </div>
        <yz-input
          :rules="[0]"
          v-model.trim="name"
          :maxlength="20"
          title="所在位置"
        />
        <!-- 非车间禁用车间属性 -->
        <yz-input v-model="workshopProperty"
                  inputType="select"
                  v-if="orgClass.value === 2"
                  :options="workshopPropertyOptions"
                  title="车间属性"/>
<!--        <yz-input v-model="orgClass"-->
<!--                  inputType="select"-->
<!--                  :is-disable="state === 'edit'"-->
<!--                  :options="orgListCopy"-->
<!--                  title="组织层级"/>-->
        <yz-input
          v-model.trim="remark"
          inputType="textarea"
          :maxlength="200"
          title="备注"
        />
      </div>
      <q-separator />
      <div class="dialog-footer text-center margin-t-10">
        <q-btn outline label="取消" color="primary" @click="hideDialog" class="q-mr-md"/>
        <q-btn unelevated label="确认" color="primary" type="submit" :loading="submitting"/>
      </div>
    </q-form>
  </basic-dialog>
</template>

<script>
import { getDict } from 'src/boot/common/dict'
import _ from 'lodash'
export default {
  name: 'add-edit-station-dialog',
  props: {
    // 组织层级列表
    orgList: {
      type: Array
    }
  },
  data () {
    return {
      isShowInnerLoading: false,
      show: false, // 弹框的显示与隐藏
      // 分为编辑状态和添加状态 'code-edit' / 'add' / 'child'
      state: 'add',
      name: '', // 所在位置
      parentName: '', // 上级名称
      parentId: '', // 上级名称
      orgClass: { label: null, id: null },
      remark: '', // 备注
      id: null, // 工位id
      submitting: false, // 提交状态
      info: {}, // 数据存储
      workshopProperty: null,
      workshopPropertyOptions: [], // 车间属性
      orgListCopy: [] // 组织层级列表实际使用的地方
    }
  },
  methods: {
    // 显示弹框
    showDialog (state, item) {
      this.isShowInnerLoading = true
      this.initInfo(state, _.cloneDeep(item))
      this.show = true
    },
    getDict (selId) {
      this.workshopProperty = null
      // 获取车间属性
      getDict('workshop_property').then(res => {
        const workshopPropertyOptions = [{
          label: '全部',
          value: null
        }]
        this.workshopPropertyOptions = workshopPropertyOptions.concat(res.data)
        !_.isNil(selId) && res.data.filter(item => item.value === selId).length && this.$set(this, 'workshopProperty', selId)
      }).finally(() => {
        this.isShowInnerLoading = false
      })
    },
    // 隐藏弹框
    hideDialog () {
      this.show = false
    },
    // 初始化数据
    initInfo (state, info) {
      this.state = state
      if (state === 'child') {
        if (info.level === 1) {
          this.orgListCopy = this.orgList.filter(item => {
            return item.value === 2
          })
        } else {
          this.orgListCopy = this.orgList.filter(item => {
            return item.value === info.level + 1
          })
        }
        this.name = info.label
        this.parentName = info.parentName
        this.parentId = info.parentId
        if (this.orgListCopy.length > 0) {
          this.orgClass = { label: this.orgListCopy[0].label, value: this.orgListCopy[0].value }
        } else {
          this.orgClass = { label: null, value: null }
        }
        this.remark = info.remark
        this.id = info.id
        this.isShowInnerLoading = false
      } else {
        this.orgListCopy = [
          // 去掉分厂层级
          // {
          //   label: '分厂',
          //   value: 1
          // },
          {
            label: '车间',
            value: 2
          }
        ]
        console.log(info, 'info')
        this.getDict(state === 'add' ? null : info.workshopProperty)
      }
      if (state === 'add') {
        this.name = ''
        this.parentName = '/'
        this.parentId = 0
        this.workshopProperty = null
        if (this.orgListCopy.length > 0) {
          this.orgClass = { label: this.orgListCopy[0].label, value: this.orgListCopy[0].value }
        } else {
          this.orgClass = { label: null, value: null }
        }
        this.remark = ''
        this.id = null
      } else if (state === 'edit') {
        this.name = info.label
        this.parentName = info.parentName
        this.parentId = info.parentId
        this.orgClass = {
          label: info.leveldesc,
          value: info.level
        }
        this.remark = info.remark
        this.id = info.id
      }
      // this.orgListCopy = this.orgList
      this.info = info
    },
    // 提交
    submit () {
      const data = {
        name: this.name,
        parentId: this.parentId,
        level: this.orgClass.value,
        remark: this.remark
      }
      this.orgClass.value === 2 && (data['workshopProperty'] = this.workshopProperty)
      if (this.state === 'edit') {
        data.id = this.id
      }
      this.submitting = true
      this.$emit('submit', this.state, data, this.info)
    },
    treeChange (target) {
      const result = this.findTree(this.treeList, target)
      this.organizeName = result.label
      this.$refs.qTreeProxy.hide()
    },
    findTree (info, id) {
      for (let i = 0; i < info.length; i++) {
        const child = info[i]
        if (child.id === id) {
          return child
        }
        if (child.children && child.children.length > 0) {
          const result = this.findTree(child.children, id)
          if (result !== null) {
            return result
          }
        }
      }
      return null
    }
  }
}
</script>

<style scoped lang="stylus">
.dialog{
  .dialog-title{
    padding 12px 16px
    line-height 1
    font-size 18px
  }
  .dialog-content{
    .name{
      font-size 16px
      display inline-block
      width 80px
    }
  }
}
</style>
